<style scoped>
.menuModule_box {
  background: #fff;
  overflow: hidden;
  margin: 0 auto;
  font-size: 16px;
  user-select: none;
  height: 100%;
  width: 200px;
}
.menuModule_box_ul {
  margin-top: 20px;
  margin-bottom: 20px;
}
.menu_item {
  margin-bottom: 11px;
}
.menu_item_title {
  width: 200px;
  height: 60px;
  background: rgba(255, 101, 50, 0.1);
  font-size: 16px;
  font-weight: 500;
  color: rgba(45, 55, 62, 1);
}
.menu_item_title_1 {
  width: 60px;
  height: 100%;
}
.menu_item_title_i {
  margin-right: 4px;
  color: #2d373e;
}
.menu_item_title_i_transform {
  transform: rotate(180deg);
}

.menu_item_m_item {
  width: 100%;
  height: 16px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(45, 55, 62, 1);
  line-height: 16px;
  margin-bottom: 20px;
}
.menu_item_m_item_1 {
  width: 60px;
  height: 16px;
  position: relative;
}
.menu_item_m_item:nth-child(1) {
  margin-top: 20px;
}
.menu_item_m_itemSel {
  color: rgba(255, 94, 41, 1);
}
.menu_item_m_item_1Sel::after {
  position: absolute;
  right: 6px;
  top: 5px;
  width: 6px;
  height: 6px;
  background: rgba(255, 101, 50, 1);
  content: "";
  border-radius: 50%;
}
</style>

<template>
  <div class="menuModule_box">
    <ul class="W_100 menuModule_box_ul">
      <li class="menu_item" v-for="(item, index) in dataList" :key="index">
        <div class="menu_item_title FAIC cursor">
          <div class="menu_item_title_1"></div>
          <div :class="{'menu_item_m_itemSel':item.isTransform}">{{item.title}}</div>
          <div class="menu_item_title_i" @click="transformClick(item)">
            <i
              class="el-icon-caret-top"
              :class="{'menu_item_title_i_transform':item.isShow,'menu_item_m_itemSel':item.isTransform}"
            ></i>
          </div>
        </div>
        <transition name="el-zoom-in-top">
          <div class="menu_item_menu" v-show="!item.isShow">
            <ul class="W_100">
              <li
                class="menu_item_m_item FAIC cursor"
                v-for="(child, childIndex) in item.children"
                :key="childIndex"
                @click="menuClick(item,child)"
              >
                <div class="menu_item_m_item_1" :class="{'menu_item_m_item_1Sel':child.isShow}"></div>
                <div :class="{'menu_item_m_itemSel':child.isShow}">{{child.title}}</div>
              </li>
            </ul>
          </div>
        </transition>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    dataList: {}
  },
  components: {},
  data() {
    return {
      isTransformMenuTitle: true
    };
  },
  filters: {},
  created: function() {},
  mounted() {
    let self = this;
    self.routeFun();
  },
  watch: {
    $route: "routeFun"
  },
  methods: {
    /* 导航处理  start */
    transformClick(item) {
      item.isShow = !item.isShow;
      if (item.isShow) {
        this.dataList.forEach(e => {
          if (e.title == item.title) {
            e.isTransform = false;
            if (e.children.length) {
              e.children.forEach(c => {
                if (c.isShow) {
                  e.isTransform = true;
                }
              });
            }
          }
        });
      } else {
        this.dataList.forEach(e => {
          if (e.title == item.title) {
            e.isTransform = false;
          }
        });
      }
    },
    menuClick(item, child) {
      item.children.forEach(e => {
        e.isShow = false;
      });
      child.isShow = true;
      this.$router.push({
        path: child.path
      });
    },
    /* 导航处理  end */
    /* 监视  route处理  start */
    routeFun() {
      let path = this.$route.path;
      if (path.indexOf("home/shop/allOrder/") > -1) {
        path = "/home/shop/allOrder/list";
      }
      this.dataList.forEach(e => {
        e.isShow = false;
        if (e.children.length) {
          e.children.forEach(c => {
            c.isShow = false;
            if (c.path == path) {
              c.isShow = true;
            }
          });
        }
      });
    }
    /* 监视  route处理  end */
  }
};
</script>
